<template>
    <view class="type-area cus-page">
        <!-- list -->
        <view class="com-m-t-20 card">
            <view v-for="(item,index) in 2" :key="index" 
                :class="['com-flex list-item',index != 0 ? 'com-m-t-40' : null]">
                <image src="/static/temporary/img2.jpg" alt=""></image>
                <view class="com-flex-col com-col-top right">
                    <text class="u-line-2 com-font-bold com-lh-40">玩乐主义集换式卡牌游戏...</text>
                    <view class="com-m-t-20">
                        <u-tag bgColor="#EAFAFF" borderColor="#EAFAFF" color="#02BDF3" size="mini" text="二手"></u-tag>
                    </view>
                </view>
                <view class="com-m-l-30 com-flex-col com-col-bottom price-num">
                    <view class="com-m-t-4 com-flex com-minor-color">
                        <text class="com-main-color com-font-bold">1680</text>
                        <text class="com-font-26">日元</text>
                    </view>
                    <text class="com-m-t-20 com-assist-color">x3</text>
                </view>
            </view>
        </view>

        <!-- 清单明细 -->
        <view class="com-m-t-20">
            <ct-row-list :datas="detailedList" />
        </view>

        <!-- 文本域框 -->
        <view class="com-m-t-20 textarea">
            <view class="com-p-b-32 title">
                <text class="com-font-32 com-font-bold">订单留言</text>
            </view>
            <u--textarea count maxlength="100" border="none" confirmType="done"
                v-model="textarea" placeholder="选填，可以给卖家备注，煤炉商品暂时不支持议价哦" >
            </u--textarea>
        </view>

        <!-- 支付方式 -->
        <view class="com-m-t-20">
            <ct-pay-way @select="selectPayWay" />
        </view>

        <!-- 购买须知 -->
        <view class="com-m-t-32">
            <text class="com-font-32 com-font-bold com-price-color">购买须知</text>
            <view class="com-m-t-16 com-minor-color" style="line-height:40rpx">
                第一条：拍拍皮小程序仅向用户提供交易平台和代购服务，无法保证商品质量。商品成功下单后用户无法单方面取消，且拍卖商品不接受退换货。请用户注意，介意勿拍。
            </view>
            <view class="com-minor-color" style="line-height:40rpx">
                第二条：商品在到达拍拍皮东京仓库后会收取国际物流费用。
            </view>
            <view class="com-minor-color" style="line-height:40rpx">
                第三条：由于代拍商品的特殊性，商品下单成功后通常无法取消或退货。
            </view>
            <view class="com-flex com-row-center">
                <view class="com-m-t-36 com-flex">
                    <u-checkbox-group
                        v-model="read"
                        placement="column"
                        @change="checkboxChange">
                        <u-checkbox size="40rpx" shape="circle" iconSize="30rpx" name="item.name"></u-checkbox>
                    </u-checkbox-group>
                    <text class="com-font-30 com-font-bold com-active-color">请阅读完毕并且勾选上列购买须知</text>  
                </view>
            </view>
        </view>

        <!-- 底部结算组件 -->
        <ct-button-settlement :bottomData="bottomData" />

        <!-- 底部间距 -->
        <u-gap height="30rpx" bgColor="transparent"></u-gap>
    </view>
</template>


<script>
export default {
    name: "logisticsExpenses", // 国际物流费
    props: {},
    components: {},

    data() {
        return {
            detailedList: {
                title: "清单列表",
                list: [
                    { title: '当前汇率', value:'1日元=0.0529人名币' },
                    { title: '物流费总价', value:'1660日元' },
                ]
            },
            textarea: "", // 留言
            read: [],
            bottomData:{
                price: 1660,
                rmb: 53,
                button: {
                    text: "提交并支付订单",
                    width: 300
                }
            }
        };
    },

    computed: {},
    watch: {},

    onHide(){},

    mounted() { },

    methods: {
        // 支付方式
        selectPayWay(e){
            console.log(e.value)
        },
        // 阅读
        checkboxChange(e){
            console.log(e)
        },
    },
};
</script>


<style scoped lang='scss'>
    .card{
        background: #fff;
        border-radius: 24rpx;
        padding: 48rpx 32rpx;
        .list-item{
			image{
				width: 180rpx;
				height: 180rpx;
				margin-right: 20rpx;
				border-radius: 24rpx;
			}
			.right{
				flex: 1;
			}
            .right,.price-num{
                height: 180rpx;
            }
		}
    }
    // 文本域框
    .textarea{
        background: #fff;
        border-radius: 24rpx;
        padding: 32rpx;
        .title{
            border-bottom: 1px solid #F8F8F8;
        }
    }
    /deep/.u-textarea{
        padding: 9px 0 !important;
    }
</style>